<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>购物车</title>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<style type="text/css">
	*{
		margin:0 auto;
	}
	a{
		text-decoration: none;
		color: black;
	}
	
	.top{
		width:1300px;
		height:30px;
		line-height: 30px;
	}
	.top_left{
		float:left;
		margin-left:100px;
		color:#ff5040;
		font-size:14px;
	}
	.top_right{
		float:left;
		margin-left:700px;
	}
	ul{
		list-style: none;
	}
	.top_right ul li{
		float:left;
		margin-left:10px;
	}
	.top_right ul li a{
		font-size: 14px;
		color: #505050;
	}
	.top_right ul li a:hover{
		color: orange;
	}
	.top_right i{
		color:#ff5040;
	}
	.middle{
		width:1300px;
		height:120px;
	}
	.middle_left{
		float:left;
		width:30%;
		margin-left:100px;
	}
	.middle_right{
		float:left;
		width:60%;
		margin-top: 35px;
	}
	.middle_line{
		width:1300px;
		height:6px;
		background-color: #F42712;
	}
	.middle_table{
		width:1300px;
		height:450px;
		margin-top: 20px;
	}
	.empty{
		width:1300px;
		height:250px;
	}
	.empty_left{
		float:left;
		margin-left: 200px;
	}
	.empty_right{
		float:left;
	}
	.empty_right_up{
		font-size: 14px;
		color: #888;
		margin-top: 100px;
	}
	.empty_right_down{
		margin-top: 20px;
	}
	.empty_right_down a:hover{
		text-decoration:underline;
		background-color: blue;
	}
	.empty_right_down a{
		display: block; 
		width:100px;
		height:30px;
		background-color: red;
		text-align: center;
		line-height: 30px;
		color:white;
		border-top-left-radius:0.5em;/*圆角边框弧度*/
		border-top-right-radius:0.5em;/*圆角边框弧度*/
		border-bottom-left-radius:0.5em;/*圆角边框弧度*/
		border-bottom-right-radius:0.5em;/*圆角边框弧度*/
	}
	.middle_table a{
		font-size: 14px;
		color:gray;
	}
	.middle_table a:hover{
		color:blue;
	}
	.wuyong{
		width:1300px;
		height:30px;
	}
	.jine{
		float:left;
		margin-left:900px;
		height:30px;
		line-height: 30px;
	}
	.jiesuan{
		float:left;
	}
</style>
<script type="text/javascript">
	function f1(){
	
	}
</script>
</head>
<body>
	<div class="top">
		<div class="top_left">
			Hi,<a href="">${username }</a><a href="index.jsp">[退出]</a>
		</div>
		<div class="top_right">
			<ul>
					<li><a href="#"><i class="fa fa-shopping-cart"></i>&nbsp;购物车</a></li>
					<li> | </li>
					<li><a href="../myorder.jsp">我的订单</a></li>
					<li> | </li>
					<li><a href="../user.jsp">我的当哩个当</a></li>
					<li> | </li>
					<li><a href="">帮助</a></li>
				</ul>
		</div>
	</div>
	<div class="middle">
		<div class="middle_left">
			<img src="../image/cartlogo.bmp">
		</div>
		<div class="middle_right">
			<table cellpadding="0" cellspacing="0" border="0" width="70%" height="50" style="line-height: 50px;text-align: center">
				<tr>
					<td style="display: block;background-color: #ccc">我的购物车</td>
					<td>填写订单</td>
					<td>完成订单</td>
				</tr>
			</table>
		</div>
	</div>
	<div class="middle_line" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='#F42712'"></div>
	<div class="middle_table">
		<c:choose>
			<c:when test="${!empty cartcheck}">
				<table width="80%" style="text-align: center;font-size: 13px">
					<tr style="color: #888;font-size: 12px;">
						<td>序号</td>
						<td>商品信息</td>
						<td>单价(元)</td>
						<td>数量</td>
						<td>金额(元)</td>
						<td>操作</td>
					</tr>
						<c:forEach items="${books}" var="book">
							<tr>
								<td width="16%">&nbsp;</td>
								<td width="20%">
									<table style="font-size: 14px;">
										<tr>
											<td><img  width="100" height="50" src="../image/book/${book.getPicture()}"></td>
										</tr>
										<tr>
											<td>${book.getBookname()}</td>
										</tr>
									</table>
								</td>
								<td width="16%">${book.getPrice()}</td>
								<td width="16%">${book.getCartcount()}</td>
								<td width="16%">${book.getPrice()*book.getCartcount()}</td>
								<td width="16%"><a href="CartDeleteServlet?bookname=${book.getBookname()}" onclick="javaScript:alert('您确定要删除吗？')">删除</a>
								</td>
							</tr>
						</c:forEach>
				</table>
				<div class="wuyong">
					<div class="jine">总金额：${sum }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>	
					<div class="jiesuan">
						<a href="../UserInfo1Servlet" style="color:white;width: 100px;height: 30px;display: block;background-color: red;text-align: center;line-height: 30px;" onclick="f1()">结算</a>
					</div>
				</div>
			</c:when>
			<c:otherwise>
				<div class="empty">
					<div class="empty_left">
						<img src="../image/cartempty.png">
					</div>
					<div class="empty_right">
						<div class="empty_right_up">您的购物车还是空的，您可以：</div>
						<div class="empty_right_down">
							<a href="index.jsp">去逛逛</a>
						</div>
					</div>
				</div>
			</c:otherwise>
		</c:choose>
	</div>
	<c:import url="bottom.jsp"></c:import>
</body>

</html>